<template>
  <div class="micro-notice-box">
    <div class="previewStyle" :style="{background: formData.bg_color,paddingTop: formData.marginTop/2 + 'px',paddingBottom: formData.marginBottom/2 + 'px'}">
      <el-carousel height="30px" :loop="true" indicator-position="none" :direction="scrollType" :autoplay="true">
        <el-carousel-item class="h100e" v-for="(item,index) in formData.noticeList" :key="index">
          <div class="dis al_item h100e">
            <span v-show="formData.iconType === '2'" class="noticeIcon" :class="item.checkedIcon" :style="{color: formData.textColor}"></span>
            <span v-show="formData.iconType === '3'" class="noticeIcon">
              <el-image v-show="item.linkObj.customImg" style="width: 30px; height: 30px" :src="item.linkObj.customImg" fit="fit"></el-image>
            </span>
            <div  v-show="formData.iconType === '2' || formData.iconType === '3'" class="border_box" :style="{background: formData.textColor}"></div>
            <span v-if="item.content != ''" class="noticeText" :style="{color: formData.textColor}">{{item.content}}</span>
            <span v-else class="noticeText" :style="{color: formData.textColor}">请填写公告内容</span>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div v-show="isShowEdit" class="design-editor-item design-hide-class">
      <el-scrollbar wrap-class="scroll-content">
        <div class="rightWrap">
            <div class="design-editor-component-title">店铺公告</div>
            <el-tabs v-model="tabActive" tab-position="top">
              <el-tab-pane label="内容设置" name="0">
                <!-- 添加公告-->
                <div class="dis dis_ju_spb al_item contentTitle">
                  <div class="font_w">图标类型</div>
                  <el-radio-group v-model="formData.iconType" size="mini">
                    <el-radio-button label="1">无</el-radio-button>
                    <el-radio-button label="2">图标</el-radio-button>
                    <el-radio-button label="3">自定义</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="groupWrap">
                  <draggable v-model="formData.noticeList">
                    <transition-group>
                      <div class="groupItemWrap" v-for="(item,index) in formData.noticeList" :key="item.id">
                        <div class="deleteBox el-icon-error" @click="deleteNotice(index)"></div>
                        <el-form :model="item">
                          <div>
                            <el-form-item label="内容:">
                              <el-input class="contentInp" size="mini" v-model="item.content" placeholder="请填写公告内容" />
                            </el-form-item>
                            <el-form-item label="链接:">
                                <div v-if="item.linkObj.microTitle&&item.linkObj.title" class="dis al_item">
                                  <span class="typeName">{{ item.linkObj.microTitle }}</span>
                                  <span class="microTitle">{{ item.linkObj.title }}</span>
                                  <span class="cursor modifyBtn microTitle" @click="checkedLink(index)">修改</span>
                                </div>
                                <div v-else class="dis al_item linkBox" @click="checkedLink(index)">
                                  <span class="linkText">请选择跳转链接</span>
                                  <span class="el-icon-arrow-right rightIcon"></span>
                                </div>
                            </el-form-item>
                            <el-form-item label="图标:" v-show="formData.iconType == '2'">
                              <div class="dis al_item">
                                <div class="iconItem dis dis_ju al_item" :class="[item.checkedIcon==iconItem? 'activeIcon':'']" @click="checkedIcon(iconItem,index)" v-for="(iconItem,iconIndex) in iconArr" :key="iconIndex">
                                  <span class="iconText" :class="[iconItem]"></span>
                                  <img v-show="item.checkedIcon==iconItem" class="activeBox" src="@/assets/common/noticeCheckIcon.png" />
                                </div>
                              </div>
                            </el-form-item>
                          </div>
                          <div v-show="formData.iconType === '3'">
                             <div class="cont-image" @click="changeImg(index)" v-if="!item.linkObj.customImg">
                                <span>+</span>
                                <p class="re-choose-img">添加图片</p>
                              </div>
                              <div class="cont-image cont-images" v-else>
                                <el-image :src="item.linkObj.customImg" fit="cover"></el-image>
                                <div class="cont-images-name" @click="changeImg(index)">更换图片</div>
                              </div>
                          </div>
                        </el-form>
                      </div>
                    </transition-group>
                  </draggable>
                  <div class="addBtnWrap">
                    <el-button size="small" icon="el-icon-plus" @click="addNotice">添加公告</el-button>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="样式设置" name="1">
                <div class="styleWrap">
                  <div class="titleStyle">内容样式</div>
                  <div>
                    <div class="dis dis_ju_spb al_item w100e item_mar">
                      <div>滚动方向</div>
                      <el-radio-group v-model="formData.scrollType" size="small">
                        <el-radio-button label="1">向上</el-radio-button>
                        <el-radio-button label="2">向左</el-radio-button>
                      </el-radio-group>
                    </div>
                    <div class="dis dis_ju_spb al_item w100e item_mar">
                      <div class="dis al_item">
                        <span>文字颜色</span>
                        <span class="text_mar">{{ formData.textColor }}</span>
                      </div>
                      <div class="dis al_item">
                        <div class="resetText" @click="resetBoderColor(1)">重置</div>
                        <el-color-picker
                          v-model="formData.textColor"
                          :show-alpha="false"
                          color-format="hex"
                          size="mini"
                        />
                      </div>
                    </div>
                    <div class="dis dis_ju_spb al_item w100e item_mar">
                      <div class="dis al_item">
                        <span>背景颜色</span>
                        <span class="text_mar">{{ formData.bg_color }}</span>
                      </div>
                      <div class="dis al_item">
                        <div class="resetText" @click="resetBoderColor(2)">重置</div>
                        <el-color-picker
                          v-model="formData.bg_color"
                          :show-alpha="false"
                          color-format="hex"
                          size="mini"
                        />
                      </div>
                    </div>
                  </div>
                </div>
                <div class="styleWrap">
                  <div class="titleStyle">
                    组件样式
                  </div>
                  <div class="dis al_item dis_ju_spb w100e item_mar">
                    <div class="dis al_item">
                      <span>上边距</span>
                      <span class="text_mar">{{ formData.marginTop }}px</span>
                    </div>
                    <el-radio-group v-model="formData.marginTop" size="small">
                      <el-radio-button label="0">小</el-radio-button>
                      <el-radio-button label="15">中</el-radio-button>
                      <el-radio-button label="30">大</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="dis al_item dis_ju_spb w100e item_mar">
                    <div class="dis al_item">
                      <span>下边距</span>
                      <span class="text_mar">{{ formData.marginBottom }}px</span>
                    </div>
                    <el-radio-group v-model="formData.marginBottom" size="small">
                      <el-radio-button label="0">小</el-radio-button>
                      <el-radio-button label="15">中</el-radio-button>
                      <el-radio-button label="30">大</el-radio-button>
                    </el-radio-group>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-scrollbar>
    </div>
     <chooseImages  ref="pics" :can-choose-images-num="canChooseImagesNum" :max="canChooseImagesNum" @chooseImagesEnd="chooseImagesEnd" @getUrl="getPicsUrl" />
    <!--选择微页面-->
    <el-dialog
      custom-class="up-dialog"
      :close-on-click-modal="false"
      top="5vh"
      title="微页面"
      :visible.sync="dialogChoosePages"
      width="42%"
    >
      <div class="choose-goods-compent">
        <choose-feature
          :is-get-choose-data="isGetChooseFeature"
          @chooseChooseFeaturesFun="chooseChooseFeaturesFun"
        />
        <div slot="footer" style="text-align: right;margin-top: 20px;">
          <el-button size="mini" type="primary" @click="isGetChooseFeature=!isGetChooseFeature">确定</el-button>
          <el-button size="mini" @click="dialogChoosePages = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import index from './index.js'

export default index
</script>
